<template>
  <ul
    class="item-active flex justify-between items-center px-[15px] py-[10px] text-[14px] border-bottom text-[#999]"
    :class="{
      'text-[#ccc]': item.Status == 0
    }"
    @click="handleJump(item)"
  >
    <li
      class="flex-[1.5] w-0 text-[#3976CC]"
      :class="{
        'text-[#ccc]': item.Status == 0
      }"
    >
      <div>{{ item.Name }}</div>
      <div class="mt-[4px]">{{ shortenString(item.Issue) }}期</div>
    </li>
    <li class="flex-1 w-0 text-center">
      <div>当期:{{ item.CurrentBetAmount }}</div>
      <div>当日:{{ item.BetAmount }}</div>
    </li>
    <li class="flex-1 w-0 text-center">
      <amount :num="item.NetAmount" />
    </li>
    <li class="flex-1 w-0 text-center">
      <template v-if="item.Status == 1">
        <template v-if="state.locked && !state.opened">
          <div class="text-[#D03731]">封盘中</div>
        </template>
        <template v-if="state.opened">
          <div class="text-[#60aa54]">开奖中</div>
        </template>
        <open-time
          simple
          v-show="!state.locked && !state.opened"
          :total-second="lockSecond"
          @finish="lockTimeFinish"
        />
        <open-time simple v-show="false" :total-second="openSecond" @finish="openTimeFinish" />
      </template>
      <template v-else>
        <span class="block leading-none">--:--</span>
      </template>
    </li>
  </ul>
</template>
<script setup lang="ts">
import { diffTime } from "@/utils/common";

const props = withDefaults(
  defineProps<{
    item: GameTotalMo;
  }>(),
  {}
);

const router = useRouter();
const state = reactive({
  locked: false,
  opened: false
});
const lockSecond = computed(() => {
  try {
    let timer = !props.item.CloseTime ? 0 : diffTime(props.item.CloseTime);
    if (timer <= 0) {
      state.locked = true;
      return 0;
    } else {
      state.locked = false;
      return timer;
    }
  } catch (error) {
    return 0;
  }
});
const openSecond = computed(() => {
  try {
    let timer = !props.item.NextTime ? 0 : diffTime(props.item.NextTime);
    if (timer <= 0) {
      state.opened = true;
      return 0;
    } else {
      state.opened = false;
      return timer;
    }
  } catch (error) {
    return 0;
  }
});

const shortenString = (str: string, maxLength = 8) => {
  if (str.length > maxLength) {
    return str.slice(0, 3) + "..." + str.slice(-5);
  }
  return str;
};
const lockTimeFinish = () => {
  state.locked = true;
};

const openTimeFinish = () => {
  state.opened = true;
};

// 跳转
const handleJump = (item: GameTotalMo) => {
  if (item.Status == 0) return;
  router.push({
    path: `/admin/main/data-detail`,
    query: {
      id: item.LotteryId
    }
  });
};
</script>
